<!doctype html>
<html lang="en">
<head>
	<title>LineChart - Table as DataSource</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#tb").wijlinechart({ width: 756, height: 475,
				showChartLabels: false,
				hint: {
					content: function () {
						return this.y;
					},
					offsetY: -10
				},
				 seriesStyles: [
					{ stroke: "#00A0B0", "stroke-width": 3 },
					{ stroke: "#CC333F", "stroke-width": 3 },
					{ stroke: "#EB6841", "stroke-width": 3 },
					{ stroke: "#EDC951", "stroke-width": 3 }
				],
				 seriesHoverStyles: [
					{ "stroke-width": 4 },
					{ "stroke-width": 4 },
					{ "stroke-width": 4 },
					{ "stroke-width": 4 }
				],
				axis: {
					y: {
					},
					x: {
						labels: {
							style: {
								rotation: -45
							}
						},
						tickMajor: { position: "outside", style: { stroke: "#999999"} }
					}
				}
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Table as DataSource</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<table id="tb" border="1">
				<caption>
					Hardware Sales by Category</caption>
				<thead>
					<tr>
						<td>
						</td>
						<th>
							Desktops
						</th>
						<th>
							Notebooks
						</th>
						<th>
							Tablets
						</th>
						<th>
							Phones
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">
							Q1
						</th>
						<td>
							64594.6
						</td>
						<td>
							32760.69
						</td>
						<td>
							62973.35
						</td>
						<td>
							23432.04
						</td>
					</tr>
					<tr>
						<th scope="row">
							Q2
						</th>
						<td>
							74933.4
						</td>
						<td>
							25261.26
						</td>
						<td>
							39395.51
						</td>
						<td>
							41129.49
						</td>
					</tr>
					<tr>
						<th scope="row">
							Q3
						</th>
						<td>
							39269.73
						</td>
						<td>
							17746.36
						</td>
						<td>
							20775.42
						</td>
						<td>
							16430.82
						</td>
					</tr>
					<tr>
						<th scope="row">
							Q4
						</th>
						<td>
							55709.52
						</td>
						<td>
							19976.28
						</td>
						<td>
							39878.09
						</td>
						<td>
							18992.22
						</td>
					</tr>
				</tbody>
			</table>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
				This sample demonstrates how to use a table as a data source. It's as easy as creating a table with rows and headers and then setting the table's ID property to the ID of the wijlinechart widget. </p>
		</div>
	</div>
</body>
</html>
